<template>
	<view class="container">
		<view class="nav">
			<view class="navitem" v-for="(item,index) in menuList" :key="index">
				<image :src="util.oss(item.media)" class="navitemImg"></image>
				<view class="navitemText">{{item.title}}</view>
			
			</view>
		</view>
		<!-- 左侧导航栏 -->
		<view class="nav-container">
			<scroll-view scroll-y="true" class="nav-scroll">
				<!-- 动态渲染导航项 -->
				<view v-for="item in navList" :key="item.id" class="nav-item"
					:class="{ active: currentNavId === item.id }" @click="handleNavClick(item)">
					<!-- 导航图标 -->
					<image class="nav-icon" :src="item.icon" mode="aspectFit" />
					<!-- 导航文字（小屏幕隐藏） -->
					<text class="nav-text" v-if="(!isCollapse)">{{ item.name }}</text>
				</view>
				
			</scroll-view>
		</view>

		<!-- 右侧内容区（带过渡动画和缓存） -->
		<!-- <keep-alive> -->
		<component :is="currentComponent" :key="currentNavId" class="content-page" />
		<!-- </keep-alive> -->
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, computed, onMounted, onUnmounted } from 'vue';
	import type { Component } from 'vue'; // 导入 Vue 组件类型
	// 🌟 新增：导入 markRaw
	import { markRaw } from 'vue';
	import UserManage from '@/components/UserManage.vue';
	import OrderManage from '@/components/OrderManage.vue';
	import ProductManage from '@/components/ProductManage.vue';
	import Login from '@/components/Login.vue';
	import api from '@/api';
	import util from '@/common/util';

	// ------------------------------ 类型定义 ----------------------------
	interface NavItem {
		id : string;
		name : string;
		icon : string;
		component : Component; // 导航项对应的组件
	}

	// ------------------------------ 响应式状态 ------------------------------
	const currentNavId = ref<string>('user'); // 当前选中的导航 ID
	const isCollapse = ref<boolean>(false);   // 导航栏是否折叠
	const navList = reactive<NavItem[]>([     // 导航项列表（含组件）
		{
			id: 'user',
			name: '用户管理',
			icon: '/static/icons/user.png',
			// 🌟 关键修改：用 markRaw 标记组件，避免被 reactive 递归响应式
			component: markRaw(UserManage),
		},
		{
			id: 'order',
			name: '订单管理',
			icon: '/static/icons/order.png',
			// 🌟 关键修改：用 markRaw 标记组件
			component: markRaw(OrderManage),
		},
		{
			id: 'product',
			name: '商品管理',
			icon: '/static/icons/product.png',
			// 🌟 关键修改：用 markRaw 标记组件
			component: markRaw(ProductManage),
		},
		{
			id: 'login',
			name: '登录',
			icon: '/static/icons/product.png',
			// 🌟 关键修改：用 markRaw 标记组件
			component: markRaw(Login),
		},
	]);

	// 当前要渲染的组件（计算属性）—— 此时 component 已被 markRaw 处理，无需额外操作
	const currentComponent = computed(() => {
		const targetNav = navList.find((nav) => nav.id === currentNavId.value);
		return targetNav?.component || null; // 找不到时返回 null（避免报错）
	});

	// ------------------------------ 方法 ------------------------------
	/** 导航项点击事件 */
	const handleNavClick = (item : NavItem) => {
		currentNavId.value = item.id;
		console.log(`切换到：${item.name}`);
	};
	// 定义返回数据类型
	interface MenuItem {
		id : number;          // 菜单项唯一ID
		media : string;       // 图片路径（相对路径或绝对路径）
		url : string;         // 跳转路径（uni-app 的页面路径）
		title : string;       // 菜单标题（比如“开卡”“实名”）
	}
	// 响应式菜单列表（初始为空数组，类型为 MenuItem[]）
	const menuList = ref<MenuItem[]>([]);
	// 获取首页菜单
	const getMenu = async () => {
		try {
			// 直接调用 this.$api.loginApi（await 等待请求完成）
			const res = await api.adminAdvert({ module: 'adv' });
			menuList.value = res.data as MenuItem[]; // 若类型完全匹配，可省略 `as MenuItem[]`
		} catch (error : any) {
			// 处理错误（比如账号密码错、网络问题）
			uni.showToast({ title: error.message, icon: 'none' });
		}
	};
	// ------------------------------ 生命周期 ------------------------------
	/** 页面加载时初始化 */
	onMounted(() => {
		getMenu();
	});
</script>

<style lang="scss" scoped>
	/* 样式部分完全保留，无需修改 */
	.container {
		display: flex;
		height: 100vh;
		overflow: hidden;
		padding-top: var(--status-bar-height);
		.nav {
			width: 100rpx;
			background: #2c3e50;
			color: #fff;
			height: 100%;
			transition: width 0.3s;
		
			.navitem {
				width: 101rpx;
				height: 100rpx;
				background: #FFFFFF;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				border: 2rpx solid #EDEDED;
				margin-left: 18rpx;
				margin-top: 10rpx;
				position: relative;
		
				.navitemImg {
					width: 58rpx;
					height: 58rpx;
					display: block;
					margin: 0 auto;
					margin-top: 10rpx;
				}
		
				.navitemText {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 16rpx;
					color: #333333;
					text-align: center;
				}
		
				.badge {
					position: absolute;
					right: 0rpx;
					top: -16rpx;
				}
			}
		}
	}

	.nav-container {
		width: 240px;
		background: #2c3e50;
		color: #fff;
		height: 100%;
		transition: width 0.3s;
	}

	.nav-scroll {
		height: 100%;
		padding: 16px 0;
	}

	.nav-item {
		display: flex;
		align-items: center;
		padding: 16px 24px;
		cursor: pointer;
		transition: all 0.3s;
	}

	.nav-item:hover {
		background: #34495e;
	}

	.nav-item.active {
		background: #3498db;
		border-left: 4px solid #fff;
	}

	.nav-icon {
		width: 24px;
		height: 24px;
		margin-right: 12px;
	}

	.nav-text {
		font-size: 16px;
		white-space: nowrap;
	}

	.content-page {
		flex: 1;
		padding: 24px;
		overflow-y: auto;
		background: #fff;
		min-height: 100%;
		border-radius: 8px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	@media (max-width: 768px) {
		.nav-container {
			width: 64px;
		}

		.nav-text {
			display: none;
		}

		.nav-icon {
			margin-right: 0;
		}

		.content-page {
			padding: 16px;
		}
	}
</style>